<template>
    <div>
        <el-card class="card-ctrl">
            <el-row>
                <el-col>
                    <!-- --------------------------------------表头操作------------------------------------------------- -->
                    <ButtonBase :button-list="props.tableInfo?.buttonList" />
                    <!-- --------------------------------------表内容--------------------------------------------------- -->
                    <el-table v-loading="false" :data="props.tableInfo?.tableContent.rowList" stripe class="table">

                        <el-table-column v-for="head in props.tableInfo?.tableContent.tableHeadList" :key="head.code"
                            align="center" :label="head.name" prop="state">
                            <template #default="scope">
                                <!-- 判断是否图标 icon -->
                                <i v-if="head.type === TableCellType.icon" :class="onGetRowData(scope.row, head.code)"></i>
                                <!-- 判断状态 state -->
                                <el-tag v-else-if="head.type === TableCellType.state"
                                    :size="stateInfo(scope.row, head.code).size"
                                    :type="stateInfo(scope.row, head.code).type">
                                    <i :class="stateInfo(scope.row, head.code).icon"></i>
                                    {{ stateInfo(scope.row, head.code).data }}
                                </el-tag>
                                <!-- 操作栏 operation -->
                                <el-tooltip v-for="ops in onGetRowData(scope.row, head.code)"
                                    v-else-if="head.type === TableCellType.operation" :key="ops.type" class="item"
                                    effect="dark" :content="ops.name" placement="bottom">

                                    <el-button circle plain :type="ops.type" :size="ops.size"
                                        @click="handleClick(ops.method, scope)">
                                        <el-icon>
                                            <Edit v-if="ops.icon === IconType.edit" />
                                            <Minus v-else-if="ops.icon === IconType.minus" />
                                            <Plus v-else-if="ops.icon === IconType.plus" />
                                            <Refresh v-else-if="ops.icon === IconType.refresh" />
                                        </el-icon>
                                    </el-button>
                                </el-tooltip>
                                <!-- 显示数据 -->
                                <span v-else>{{ onGetRowData(scope.row, head.code) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- ---------------------------------------------分页--------------------------------------------------- -->
                    <div class="pagination">
                        <el-pagination :current-page="props.tableInfo?.page" :page-size="props.tableInfo?.limit"
                            layout="sizes,prev,pager,next,total" :page-sizes="[5, 10, 20]" :total="props.tableInfo?.total"
                            background @current-change="props.tableInfo?.onCurrentChange"
                            @size-change="props.tableInfo?.onSizeChange">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { Edit, Minus, Plus, Refresh } from '@element-plus/icons-vue'
import ButtonBase from "@/components/common/button/ButtonBase.vue";

import { IconType, TableCellType } from '@/entity/enums/CommonType';

import TableListPageInfo from '@/entity/table/TableListPageInfo';
import TableRow from '@/entity/table/TableRow';
import { defineProps } from 'vue'
import { StateInfo } from '@/entity/StateInfo';

const props = defineProps({
    tableInfo: TableListPageInfo
})

const onGetRowData = (row: TableRow, code: string) => {
    const { cellList } = row;
    for (let i = 0; i < cellList.length; i++) {
        const cell = cellList[i];
        if (cell.headCode === code) {
            return cell.data;
        }
    }
    return '';
}

const stateInfo = (row: TableRow, code: string): StateInfo => {
    const state = onGetRowData(row, code);
    const info: StateInfo = props.tableInfo?.onState(code, state)
    return info;
}

const handleClick = (method: Function, params) => {
    console.log(params, 'params')
    return method(params)
}

</script>
<style lang="stylus" scoped></style>
  